<template>
  <div>
    <div class="pos-rlt" :style="{height:`${showBtn?80:40}px`}" style="width:0px;border-left:solid 1px #226c9a;margin:0 auto;">
      <a-popover v-if="showBtn" title="添加节点" placement="rightTop">
        <template slot="content">
          <div class="w360">
            <a-row :gutter="10">
              <a-col :span="8" v-for="(type,i) in filteredList" :key="`type${i}`">
                <div class="node flx-c" @click="addNode(type)">{{ type.name }}</div>
              </a-col>
            </a-row>
          </div>
        </template>
        <i class="fa fa-plus-circle pos-abs add-btn"/>
      </a-popover>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    scope: {
      type: Array,
      default: () => {
        return [1, 2, 3, 4, 5, 6, 7]
      }
    },
    showBtn: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    filteredList () {
      return this.typeArr.filter(x => {
        return this.scope.includes(x.key)
      })
    }
  },
  data () {
    return {
      typeArr: [
        { key: 1, name: '普通节点' },
        { key: 2, name: '脚本节点' },
        { key: 3, name: '会签节点' },
        { key: 4, name: '或签节点' },
        { key: 5, name: '条件分支' },
        { key: 6, name: '循环节点' },
        { key: 7, name: '子流程' }
      ]
    }
  },
  mounted () {
  },
  methods: {
    addNode (type) {
      this.$emit('addNode', Object.assign({}, type))
    }
  }
}
</script>
<style lang="less" scoped>
.node{
  height:30px;
  font-size:10px;
  margin-bottom:10px;
  border-radius:15px;
  border:solid 1px #333;
  width:100px;
  &:hover{
    cursor:pointer;
    border:solid 1px #0b709b;
    background:#0b709b;
    color:#fff;
  }
}
.add-btn{
  font-size:18px;
  top:30px;
  left:-9px;
  background:#fff;
  &:hover{
    color:#1f6a9c;
    cursor:pointer;
    font-size:24px;
    left:-12px;
    top:27px;
  }
}
</style>
